<!--
 * @Descripttion: 订单提现
 * @Author: Timor
 * @Date: 2020-01-08 10:38:39
 * @LastEditors  : Timor
 * @LastEditTime : 2020-01-08 11:15:01
 -->

 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- 搜索 -->
    <!-- <jq-search :content="content" @onChangeSearch="onChangeSearch"/> -->
    <!-- 订单收货列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 账户名称 -->
        <el-table-column prop="bankUserName" label="账户名称"></el-table-column>
        <!-- 银行名称 -->
        <el-table-column prop="bankName" label="银行名称"></el-table-column>
        <!-- 银行账号 -->
        <el-table-column prop="bankNo" label="银行账号"></el-table-column>
        <!-- 提现金额 -->
        <el-table-column prop="withdrawMoney" label="提现金额"></el-table-column>
        <!-- 提现状态 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
              <span
              :class="[scope.row.status === 1 ? 'default' : scope.row.status === 2 ? 'doing' : 'over']"
              class="public-table__status"
            ></span>
            <span>{{ scope.row.status === 1 ? "待审核" : scope.row.status === 2 ? "已通过" : "已驳回" }}</span>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createAt" label="申请时间"></el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1" @click="onChangeStatus(scope.row.id, 2)" type="text" size="small">通过</el-button>
            <el-button v-if="scope.row.status === 1" @click="onChangeStatus(scope.row.id, 3)" type="text" size="small">驳回</el-button>
            <el-button v-else type="text" size="small">----</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />
  </div>
</template>

<script>
import { getWithdrawList, getUpdateStatus } from '@/api/order.js'
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
export default {
  name: 'OrderWithdraw',
  components: { JqTitle, JqPage },
  data() {
      return {
        title: { label: '提现管理', flag: false, searchFlag: false },
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        total: 0
      }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetWithdrawList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetWithdrawList()
    }
  },
  created() {
    this.onGetWithdrawList()
  },
  methods: {
    /**
     * @Author: Timor
     * @Descripttion: 提现列表
     * @Date: 2020-01-08 10:46:05
     */  
    onGetWithdrawList() {
      getWithdrawList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
  /**
   * @Author: Timor
   * @Descripttion: 提现通过/驳回
   * @Date: 2020-01-08 10:46:22
   */
    onChangeStatus(id, status) {
        getUpdateStatus({
            id: id,
            status: status
        }).then(() => {
            this.$message({
                type: 'success',
                message: '操作成功',
                duration: 2000,
                onClose: () => {
                    this.onGetWithdrawList()
                }
            })
        })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    }
  }
}
</script>
